<template>
	<div class="container">
		<!-- 进度条 -->
		<van-empty description="暂时没有数据" v-if="attitude==''" />
		<div class="progress" :style="{width:width}" v-if="attitude!=''"></div>
		<van-swipe @change="onChange" :loop="false" ref="swiper" v-if="attitude!=''"  :touchable="false" :lazy-render='true'>
			<van-swipe-item v-for="(item,index) in attitude" :key="index" >
				<!-- <div class="photo"><img :src="item.attitudeImg" alt=""></div>
				<div class="block">
					<div class="attitude-name">{{item.attitudeName}}</div>
					<div class="addres">{{item.address}}</div> -->


						<div class="title1">
							{{getTitle(item.title)[0]}}
						</div>
						<div class="action">
							动作{{current + 1}}{{getTitle(item.title)[1]}}
						</div>
					<div class="mainbox" style="position: relative;">
						<div class="content" v-html="item.content" v-if="current==index"></div>
						<img :src="item.cover" alt=""  class="coverimg" v-show="hideimg">
						<!-- <video class="video" :src="url" :loop="false" :controls="true" :autoplay="true" v-if="url!=''"></video> -->
						<van-icon name="play-circle" color="rgba(255,255,255,.8)" v-show="hideimg" @click="playvideo" size="50"/>
						<div class="title" ><span v-html="item.point"></span></div>
					</div>
					<!-- <div class="content">
						<p class="title">动作要求：</p>
						<p class="detail">{{item.title}}</p>
					</div> -->
				<!-- </div> -->
			</van-swipe-item>
			<template #indicator>
			  <div class="custom-indicator">
			    {{ current + 1 }}/{{ attitude.length }}
			  </div>
			</template>
		</van-swipe>
		<span class="backmain" v-if="attitude==''" @click="backhome">返回首页</span>
		<div class="left-button" v-if="attitude!=''" @click="prev"><van-icon name="cross" size="48" color="#000"/><span class="tips">不可以</span></div>
		<div class="right-button"  v-if="attitude!=''" @click="next"><van-icon name="success" size="48" color="#fff"/><span class="tips">可以</span></div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				width:'10vw',//进度条长度
				current:0,
				attitude:[],
				cantAction:[],
				hideimg:true,
				show:false,
				url:'',
			}
		},
		methods:{
			getTitle(str){
				return str.split("-");
			},
			onChange(index){
				this.current = index
				// 动态变更进度条长度
				this.width = ((index+1)/this.attitude.length)*100+'vw'
			},
			// 不能完成动作
			prev(e){
				this.$refs.swiper.next()
				this.cantAction.push(this.attitude[this.current].id)
				if(this.current==this.attitude.length-1){
					let cantAction = this.cantAction
					localStorage.setItem('cantaction',cantAction)
					this.$router.push('/report?id='+this.$route.query.id+'&user_id='+this.$route.query.user_id)
				}
				this.hideimg=true
				this.url=''
			},
			playvideo(){
				this.hideimg=false
				var videodom = document.getElementsByClassName('edui-upload-video');
				console.log(videodom)
				this.url = videodom[this.current].src==undefined?videodom[this.current].src:videodom[this.current].currentsrc
			},
			// 可以完成动作
			next(){
				this.$refs.swiper.next()
				let cantAction = this.cantAction
				localStorage.setItem('cantaction',cantAction)
				if(this.current==this.attitude.length-1){
					this.$router.push('/report?id='+this.$route.query.id+'&user_id='+this.$route.query.user_id)
				}
				this.hideimg=true
				this.url=''
			},
			// 请求数据
			getAttitude(id){
				let openid = localStorage.getItem('openid')
				this.$axios.post('assessment/topics',{openid,id})
				.then(res=>{
					console.log(res)
					this.attitude = res.data.data
					console.log(res.data.data[0].cover)
				})
			},
			backhome(){
				this.$router.push('/solution')
			}
		},
		created() {
			this.onChange(0)
			console.log(this.$route.query.id)
			this.getAttitude(this.$route.query.id)
		}
	}
</script>

<style scoped lang="less">
.action,.title1{
	    font-weight: 700;
    font-size: 1.3rem;
    // margin-top: 1.5rem;
	margin:0 5vw;
	text-align: center;
	
}
.title1{
margin-top: 12.667vw;
}
	.container{
		width: 100%;
		height: 100%;
		overflow: hidden;
		.mainbox{
			width: 100vw;
			height: 69.5vw;
			position: fixed;
			// top: 10vh;
			top: 3vh;
			.video{
				width: 90vw;
				height: 40vh;
				position: fixed;
				top: 10vh;
			}
			.coverimg{
				position: absolute;
				top: 0;
				left:5vw;
				width: 90vw;
				height: 100%;
				border-radius: 1rem;
			}
			.title{
				position: absolute;
				top:74.667vw;
				left: 0;
				margin-right: 5vw;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 4;
			}
		}
		.van-icon{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		.progress{
			background-color: #07C160;
			height: .3rem;
			position: fixed;
			top: 0;
			z-index: 9;
			left: 0;
		}
		.van-swipe{
			width: 100%;
			height: 140vw;
			box-sizing: border-box;
			background-color: #Fff;
			overflow: hidden;
			.custom-indicator {
					position: absolute;
					width: 4rem;
					height: 1.2rem;
					text-align: center;
					right: 40%;
					top:1.5rem;
					border-radius: 1.5rem;
					padding: .05rem .2rem .3rem .2rem;
					font-size: 1rem;
					border: .1rem solid #D0D4DD;
					line-height: 1.5rem;
					color: #D0D4DD;
					font-weight: 700;
			}
			.photo{
				width: 23.5rem;
				height: 15rem;
				border-radius: .4rem;
				overflow: hidden;
				margin-left: 2rem;
				margin-top:5.1rem;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.block{
				width: 24rem;
				margin-left: 2rem;
				margin-top: 1rem;
			}
			.attitude-name{
				font-size: 1.4rem;
				font-weight: 700;
				margin-bottom: .5rem;
			}
			.addres{
				color: #D7D9E2;
			}
			.title{
				font-weight:700;
				font-size: 1.3rem;
				margin-top: 1.5rem;
				margin-left: 5vw;
			}
			.content{
				max-width: 90vw;
				overflow: hidden;
				margin-left: 5vw;
				border-radius: 1rem;
				// min-height: 20rem;
				// margin-top: 6rem;
				// padding-top: 1rem;
				// border-top: 1px solid #D7D9E2;
				// 修改v-html中的元素样式使用>>>符号 sass/less中使用/deep/
				/deep/ video,img{
					width: 90vw!important;
					
					// height: auto !important;
					border-radius: 0.5rem!important;
					object-fit: cover;
				}
				.detail{
					text-indent: 2rem;
					letter-spacing: .1rem;
					line-height: 1.5rem;
					font-size: 1.1rem;
					position: relative;
					
				}
			}
		}
		.left-button{
			text-indent: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 6rem;
			height: 6rem;
			margin-bottom: 5.333vw;
			border-radius: 3rem;
			background: #E3E4E9;
			left: 1rem;
			position: absolute;
			// bottom: 4rem;
			left: 5rem;
			text-align: center;
			.van-icon{
			}
			.tips{
				position: absolute;
				top: 6.5rem;
				color: #E3E4E9;
				font-weight: 700;
				font-size: 1.1rem;
			}
		}
		.right-button{
			text-align: center;
			text-indent: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 6rem;
			height: 6rem;
			margin-bottom: 5.333vw;
			border-radius: 3rem;
			position: absolute;
			// bottom: 4rem;
			right: 5rem;
			background: linear-gradient(45deg,#0A96C7,#18B8CE);
			.van-icon{
			}
			.tips{
				position: absolute;
				top: 6.5rem;
				color: #E3E4E9;
				font-weight: 700;
				font-size: 1.1rem;
			}
		}
		.backmain{
			text-align: center;
			text-indent: 0;
			display: block;
			width: 12rem;
			height: 4rem;
			border-radius: 2rem;
			line-height: 4rem;
			position: absolute;
			bottom: 2rem;
			right: 8rem;
			color: #fff;
			font-size: 1.5rem;
			background: linear-gradient(45deg,#0A96C7,#18B8CE);
		}
	}
</style>
